<%@ page import="com.party.core.model.system.TargetType" %>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<%@ taglib prefix="memberForm" uri="http://www.tongxingzhe.cn/memberForm" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>${subject == null ? '发布' : '编辑'}主题</title>
    <%@include file="../include/commonFile.jsp"%>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/ui/activity/publish_form.css">
</head><body>
<!--头部-->
<%@include file="../include/header.jsp"%>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp"%>
    <!--内容-->
    <section>
        <div class="section-main">
            <!-- 正文请写在这里 -->
            <div class="add-form-content">
            <form id="myForm" class="layui-form mt20" method="post" action="${ctx}/mall/showsubject/save.do">
                <input type="hidden" name="id" id="id" value="${subject.id}" />

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">选择主题<%--<span class="f-verify-red">*</span>--%></label>
                        <div class="layui-input-inline">
                            <c:if test="${subject != null}">
                                <input type="text" value="${template.name}" class="layui-input" disabled/>
                                <input type="hidden" name="templateId" value="${subject.templateId}"/>
                            </c:if>
                            <c:if test="${subject == null}">
                                <select id="templateId" name="templateId" lay-verify="templateId" lay-filter="templateId">
                                    <option value="">无主题</option>
                                    <c:forEach var="template" items="${templateList}">
                                        <option value="${template.id}">${template.name}</option>
                                    </c:forEach>
                                </select>
                            </c:if>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">选择对象<span class="f-verify-red">*</span></label>
                    <div class="layui-input-inline">
                        <input type="hidden" name="memberId" lay-verify="memberId" value="${subject.memberId}"/>
                        <input type="text" id="memberName" value="${memberForm:getRealNameById(subject.memberId)}"
                               class="layui-input" readonly/>
                    </div>
                    <a class="layui-btn layui-btn-danger" type="button"
                       onclick="openSelMemberDialog(this,'选择对象','${ctx}/system/member/selectMember.do?isPartner=1&pageType=1','950px','600px')">
                        选择
                    </a>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">主题名称<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" lay-verify="name" autocomplete="off" class="layui-input"
                                   value="${subject.name}" style="width: 900px ;" placeholder="主题名称, 最多50字符"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">发布者<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="publisher" lay-verify="publisher" autocomplete="off" class="layui-input"
                                   value="${subject.publisher}"  style="width: 900px ;"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">头像<span class="f-verify-red">*</span></label>
                    <div class="cover-content">
                        <c:if test="${subject == null || empty subject.publisherLogo}">
                            <input type="hidden" name="publisherLogo" id="publisherLogo"
                                   lay-verify="publisherLogo" value="${sessionScope.newCurrentUser.logo}"/>
                            <span id="logo-img" class="round-img"
                                  style="background-image:url(${sessionScope.newCurrentUser.logo})"></span>
                        </c:if>
                        <c:if test="${subject != null && not empty subject.publisherLogo}">
                            <input type="hidden" name="publisherLogo" id="publisherLogo"
                                   lay-verify="publisherLogo"
                                   value="${subject.publisherLogo}"/>
                            <span id="logo-img" class="round-img"
                                  style="background-image:url('${subject.publisherLogo}')"></span>
                        </c:if>
                        <a class="layui-btn layui-btn-danger" id="sel_logo_img">+添加头像</a>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题海报<span class="f-verify-red">*</span></label>
                    <div class="cover-content">
                        <input type="hidden" name="pic" id="pic" lay-verify="pic" value="${subject.pic}"/>
                        <c:if test="${subject == null || empty subject.pic}">
                                <span id="cover-img" class="cover-img"
                                      style="background-image:url(${ctx}/image/posterImg.png)"></span>
                        </c:if>
                        <c:if test="${subject != null && not empty subject.pic}">
                                <span id="cover-img" class="cover-img"
                                      style="background-image:url('${subject.pic}')"></span>
                        </c:if>
                        <c:if test="${not empty subject.id}">
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">更换海报</a>
                        </c:if>
                        <c:if test="${empty subject.id}">
                            <a class="layui-btn layui-btn-danger" id="sel_pic_img">添加海报</a>
                        </c:if>
                        <div class="form-word-aux">建议尺寸：800x450</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">主题说明<%--<span class="f-verify-red">*</span>--%></label>
                        <div class="layui-input-inline" >
                            <input type="text" name="templateInstruction" id="templateInstruction" autocomplete="off" class="layui-input"
                                   value="${template.name}" disabled style="width: 900px ;"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">机构主题说明<span class="f-verify-red">*</span></label>
                        <div class="layui-input-inline" >
                            <input type="text" name="instruction" id="instruction" lay-verify="instruction" autocomplete="off" class="layui-input"
                                   value="${subject.instruction}" style="width: 900px ;"/>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题内容<span class="f-verify-red">*</span></label>
                    <div class="layui-input-block">
                        <script id="ueditor1" type="text/plain"></script>
                        <div style="display: none" id="contentView">${subject.content}</div>
                        <input type="hidden" name="content" id="content" lay-verify="content"  data-link-ue="ueditor1"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">购买说明</label>
                    <div class="layui-input-block">
                        <script id="ueditor2" type="text/plain"></script>
                        <div style="display: none" id="contentView2">${subject.buyInstruction}</div>
                        <input type="hidden" name="buyInstruction" id="buyInstruction" lay-verify="buyInstruction"  data-link-ue="ueditor2"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit lay-filter="*">立即提交</a>
						<a href="${ctx}/mall/showsubject/list.do" class="layui-btn layui-btn-primary">取消</a>
                    </div>
                </div>

            </form>
            </div>
        </div><%@include file="../include/footer.jsp"%>
    </section>
</div>
<!--底部-->
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadCI.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/myplugin/uploadVideo.js"></script>
<script type="text/javascript" src="${ctxStatic}/UEditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/script/common/form_cache.js"></script>
<script>
	var ue = UE.getEditor('ueditor1'),
        ue2 = UE.getEditor('ueditor2'),
        form, formcache;

    $(function () {
        layui.use([ 'form', 'laydate' ], function() {
            var form = layui.form;

            //自定义验证规则
            form.verify({
                /*templateId: function (value) {
                    if (value == "") {
                        return '请选择主题分类';
                    }
                },*/
                memberId: function (value) {
                    if (!value || !value.trim()) {
                        return '请选择所属合作商';
                    }
                },
                name : function(value) {
                    if (value == "" || !value.trim()) {
                        return '请填写主题名称';
                    } else {
                        var str = value.replace(/[^\u0000-\u00ff]/g,"aa");
                        if (str.length > 100) {
                            return '主题名称最多50个汉字或100个字母(数字)';
                        }
                    }
                },
                publisher: function (value) {
                    if (!value || !value.trim()) {
                        return '请填写发布者';
                    }
                },
                publisherLogo: function (value) {
                    if (!value || !value.trim()) {
                        return '请选择头像';
                    }
                },
                pic: function (value) {
                    if (!value || !value.trim()) {
                        return '请选择主题海报';
                    }
                },
                instruction: function (value) {
                    if (!value || !value.trim()) {
                        return '请填写机构主题说明';
                    }
                },
                content : function(value) {
                    $("#contentView").html(ue.getContent());
                    var content = $("#contentView").html();
                    if (content == "" || !content.trim()) {
                        return "请填写主题内容";
                    }
                }
            });

            form.on('select(templateId)', function (data) {
                //loading层
                var loadIndex = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                if (data.value == "") {
                    // 主题海报
                    $('#cover-img').css('background-image', 'url("${ctx}/image/posterImg.png")');
                    $('#pic').val('');
                    // 主题说明
                    $('#templateInstruction').val('');
                    // 机构主题说明
                    $('#instruction').val('');
                    // 主题内容
                    $("#contentView").html('');
                    ue.setContent($("#contentView").html());
                    // 购买说明
                    $("#contentView2").html('');
                    ue2.setContent($("#contentView2").html());
                    layer.close(loadIndex);
                } else {
                    $.post("${ctx}/mall/showtemplate/getData.do", {id: data.value}, function (res) {
                        if (res.success) {
                            // 主题海报
                            $('#cover-img').css('background-image', 'url(' + res.data.pic + ')');
                            $('#pic').val(res.data.pic);
                            // 主题说明
                            $('#templateInstruction').val(res.data.instruction);
                            // 机构主题说明
                            $('#instruction').val(res.data.instruction);
                            // 主题内容
                            $("#contentView").html(res.data.content);
                            ue.setContent($("#contentView").html());
                            // 购买说明
                            if (res.data.buyInstruction) {
                                $("#contentView2").html(res.data.buyInstruction);
                                ue2.setContent($("#contentView2").html());
                            }
                        }
                        layer.close(loadIndex);
                    })
                }
            });

            //监听提交
            form.on('submit', function (data) {
                txz.submitObject(data.elem, function (callBack) {
                    var formData = getFormData();
                    txz.ajaxRequest({
                        method: 'post',
                        url: '${ctx}/mall/showsubject/save.do',
                        saveCache: true,
                        cacheObj: formcache,
                        params: formData,
                        callBack: function (res) {
                            typeof callBack === 'function' && callBack();
                            if (res.success) {
                                util.layerMsgSuccess("提交成功", function () {
                                    location.href = "${ctx}/mall/showsubject/list.do";
                                });
                            } else {
                                util.layerMsgError("提交失败")
                            }
                        }
                    });
                });
                return false;
            });
        });

        ue.addListener('ready', function() {
         /*   if ($("#contentView").html() != "") {
                this.setHeight(850);
            }*/
            this.setContent($("#contentView").html());
            //等待ueditor加载完后加载缓存
            <%--if(!'${subject.id}'){--%>
            //     formcache = new fCache({
            //         fCacheKey: 'form_cache_mall_subject',//暂存的key
            //         cacheCallback: loadCacheData,//获取到缓存后加载的方法
            //         getFormData: getFormData
            //     }).init();
            // }
        });

        ue2.addListener('ready', function() {
            /*   if ($("#contentView").html() != "") {
                   this.setHeight(850);
               }*/
            this.setContent($("#contentView2").html());
        });

        ue.addListener('blur', function() {
            $("#contentView").html(ue.getContent());
        });

        ue2.addListener('blur', function() {
            $("#contentView2").html(ue2.getContent());
        });

        $('#sel_logo_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：120x120',
                type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
                cb: function (imgs) {
                    $('#logo-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#publisherLogo').val(imgs[0].path);
                }
            })
        });

        $('#sel_pic_img').click(function () {
            txz.openSelImg({
                min: 1,
                max: 1,
                info: '建议尺寸：800x450',
                type: '<%=TargetType.ZC_ACTIVITY.getCode()%>',
                cb: function (imgs) {
                    $('#cover-img').css('background-image', 'url(' + imgs[0].path + ')');
                    $('#pic').val(imgs[0].path);
                }
            })
        });
    });

	// 文本编辑器图片上传
	function uEditorUploadCI(editor) {
        txz.openSelImg({
            min: 1,
            type: '<%=TargetType.MALL.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
	}

    function uEditorUploadCIVideo(editor) {
        txz.openSelVideo({
            min: 1,
            type: '<%=TargetType.MALL.getCode()%>',
            cb: function (imgs) {
                if (imgs.length) {
                    for (var i = 0, item; i < imgs.length; i++) {
                        item = imgs[i];
                        editor.focus();
                        editor.execCommand('inserthtml', item.htmlStr);
                    }
                }
            }
        })
    }

    function loadCacheData(cacheData) {
        form.render();
    }

    function getFormData() {
        $("#content").val(ue.getContent().replace(/&quot;/gi, ""));
        $("#buyInstruction").val(ue2.getContent().replace(/&quot;/gi, ""));
        var formData = util.serializeForm($('#myForm').serializeArray());
        return formData;
    }

    function openSelMemberDialog(that, title, url, width, height) {
        txz.openDialogIframe({
            width: width,
            height: height,
            title: title,
            url: url,
            cb: function (opt) {
                var content = opt.content;
                if (content.doSubmit()) {
                    var data = content.returnData();
                    $('input[name=memberId]').val(data.id);
                    $('#memberName').val(data.name);
                    if (!$('input[name=publisher]').val()) {
                        $('input[name=publisher]').val(data.name);
                    }
                    // if (!$('#id').val()) {
                        $('#publisherLogo').val(data.logo);
                        $('#logo-img').css('background-image', 'url(' + data.logo + ')');
                    // }
                    top.layer.close(opt.index);
                }
            }
        })
    }
</script>
</body>
<script type="text/javascript">
    txz.initHeader({
        nav:[{
            name: '机构主题',
            href:'${ctx}/mall/showsubject/list.do'
        },{
            name: '${subject == null ? '发布' : '编辑'}主题',
            curr: true
        }],
        btns:[{
            type: 'back'
        }]
    });
</script>
</html>